<template>
    <div class="scroll-container"></div>
    <img class="arrow arrow-top-left" src="/img/common/ljiantou.png">
    <img class="arrow arrow-top-right" src="/img/common/ljiantou.png">
    <img class="arrow arrow-bottom-left" src="/img/common/ljiantou.png">
    <img class="arrow arrow-bottom-right" src="/img/common/ljiantou.png">
</template>

<script>
import { render, h } from 'vue';

export default {
    name: "Scroll",
    props: ["containerList"],
    data() {
        return {
            curIndex: 0,
            isUpAnimation: false,
            isDownAnimation: false,
            list: [],
            csList: [
                "/img/style/lake.jpg",
                "/img/style/simiao.jpg",
                "/img/style/zhongta.jpg",
            ],
        }
    },
    computed: {
    },
    methods: {
        //创建img
        createImg() {
            for (const item of this.csList) {
                const initData = { src: item, style: "width:100%;height:100%;" };
                const instance = h("img", initData);
                this.list.push(instance);
            }
        },
        //获取上一容器索引
        getPrevIndex() {
            return this.curIndex == 0 ? this.list.length - 1 : this.curIndex - 1;
        },
        //获取下一容器索引
        getNextIndex() {
            return this.curIndex == this.list.length - 1 ? 0 : this.curIndex + 1;
        },

        //根据索引创建元素
        createElement(i) {
            const container = this.$el.parentElement.querySelector(".scroll-container");
            const div = document.createElement("div");
            div.className = "scroll-item";
            container.appendChild(div);
            render(this.list[i], div);
            return div;
        },
        //初始化容器
        resetElements() {
            const container = this.$el.parentElement.querySelector(".scroll-container");
            container.innerHTML = "";
            const prevIndex = this.getPrevIndex();
            const nextIndex = this.getNextIndex();
            this.createElement(prevIndex).classList.add("scroll-prev");
            this.createElement(this.curIndex).classList.add("scroll-cur");
            this.createElement(nextIndex).classList.add("scroll-next");
        },
        //鼠标滚轮监听事件
        listenWheelEvent(e) {
            if (!e.deltaY || this.isDownAnimation || this.isUpAnimation) {
                return;
            }
            if (e.deltaY > 0) {
                this.isDownAnimation = true;
                this.curIndex = this.getNextIndex();
                const container = this.$el.parentElement.querySelector(".scroll-container");
                container.classList.add("scroll-down");
            }
            if (e.deltaY < 0) {
                this.isUpAnimation = true;
                this.curIndex = this.getPrevIndex();
                const container = this.$el.parentElement.querySelector(".scroll-container");
                container.classList.add("scroll-up");
            }
        },
        //动画结束监听事件
        listenTransitionendEvent(e) {
            //判断是否是向上滚动动画
            if (e.target.className === "scroll-item scroll-prev") {
                const container = this.$el.parentElement.querySelector(".scroll-container");
                container.classList.remove("scroll-up");
                this.isUpAnimation = false;

                //向前替换元素
                const prev = this.$el.parentElement.querySelector(".scroll-prev");
                const cur = this.$el.parentElement.querySelector(".scroll-cur");
                const next = this.$el.parentElement.querySelector(".scroll-next");

                const prevIndex = this.getPrevIndex();
                const div = document.createElement("div");
                div.className = "scroll-item";

                container.removeChild(next);
                container.prepend(div);

                prev.classList.remove("scroll-prev");
                prev.classList.add("scroll-cur");

                cur.classList.remove("scroll-cur");
                cur.classList.add("scroll-next");

                div.classList.add("scroll-prev");
                render(this.list[prevIndex], div);
            }
            //判断是否是向下滚动动画
            if (e.target.className === "scroll-item scroll-next") {
                const container = this.$el.parentElement.querySelector(".scroll-container");
                container.classList.remove("scroll-down");
                this.isDownAnimation = false;

                //向后替换元素
                const prev = this.$el.parentElement.querySelector(".scroll-prev");
                const cur = this.$el.parentElement.querySelector(".scroll-cur");
                const next = this.$el.parentElement.querySelector(".scroll-next");

                const nextIndex = this.getNextIndex();
                const div = document.createElement("div");
                div.className = "scroll-item";

                container.removeChild(prev);
                container.appendChild(div);

                next.classList.remove("scroll-next");
                next.classList.add("scroll-cur");

                cur.classList.remove("scroll-cur");
                cur.classList.add("scroll-prev");

                div.classList.add("scroll-next");
                render(this.list[nextIndex], div);
            }
        }
    },
    created() {
        if (this.$props.containerList) {
            this.list = this.$props.containerList;
        } else {
            this.createImg();
        }
    },
    mounted() {
        this.resetElements();
        const container = this.$el.parentElement.querySelector(".scroll-container");
        container.addEventListener("wheel", this.listenWheelEvent);
        container.addEventListener("transitionend", this.listenTransitionendEvent);
    },
    beforeUnmount() {
        //注销监听器
        const container = this.$el.parentElement.querySelector(".scroll-container");
        container.removeEventListener("wheel", this.listenWheelEvent);
        container.removeEventListener("transitionend", this.listenTransitionendEvent);
    }
}
</script>

<style>
@import url("@/assets/css/style/scroll.css");

.arrow {
    position: fixed;
    width: 100px;
    height: 100px;
    pointer-events: none;
    z-index: 2;
}

.arrow-top-left {
    top: 5%;
    left: 5%;
    animation: upfloat 0.5s infinite;
    animation-direction: alternate;
}

.arrow-top-right {
    top: 5%;
    right: 5%;
    animation: upfloat 0.5s infinite;
    animation-direction: alternate;
}

.arrow-bottom-left {
    bottom: 5%;
    left: 5%;
    transform: scaleY(-1);
    animation: downfloat 0.5s infinite;
    animation-direction: alternate;
}

.arrow-bottom-right {
    bottom: 5%;
    right: 5%;
    transform: scaleY(-1);
    animation: downfloat 0.5s infinite;
    animation-direction: alternate;
}
</style>